<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页 | KeyBoard For Fun!</title>
		<link rel="stylesheet" type="text/css" href="my_page_style.css"/>
		<script src="my_page_javascript.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body id="bodystyle">
		<div id="top">
				<div id="NAVBAR">
					<div id="logo">
						<div id="LOGO">
							<strong>Geek KeyBoard</strong>
						</div>
					</div>
					<div id="CONTENTS">
						<ul>
							<p onclick="openHOMEPAGE()">首页</p>
							<li>今日热点</li>
							<li>生活区</li>
						</ul>
						<ul>
							<p>装备社区</p>
							<li>生活区</li>
							<li onclick="openTIEZI()">装备展示厅</li>
							<li>装备情报</li>
							<li>提问区</li>
							<li>交易信息区</li>
						</ul>
						<ul>
							<p onclick="openSHOP()">装备商店</p>
							<li>机械键盘</li>
							<li>键帽</li>
							<li>键盘轴体</li>
							<li onclick="openSHOPDETAIL()">模玩手办</li>
							<li>音频HiFi</li>
						</ul>
						<ul>
							<p>装备信息</p>
							<li>装备百科</li>
							<li>新品发车</li>
							<li>科普文章</li>
						</ul>
						<ul>
							<p style="border-right: none;" onclick="openUSER()">个人中心</p>
							<li>我的帖子</li>
							<li>个人信息</li>
							<li>购物车</li>
							<li>收藏夹</li>
						</ul>
					</div>
					<div id="SEARCH">
						<div class="icon" title="这里是搜索栏哦" style="cursor:pointer;">&#xf002 </div>
						<form action="" method="" >
							<input type="text" name="firstname" placeholder="在 Geek KeyBoard！中搜索">
						</form>
					</div>
					<div id="USER">
						<div class="icon">&#xf007 </div>
						<a href="#" title="点击登录或注册进入Geek KeyBoard!" onclick="log_on_open()">登录 | 注册</a>
					</div>
				</div>
		</div>
		<div id="mid_hot">
			<div id="mid_title1"><p class="icon" style="font-size: 20px;">&#xf0d7 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今日热点</p></div>
			<div id="mid">
				<div id="hot">
					<p>&nbsp;&nbsp;热门讨论</p>
						<li>
							<a href="带作业-内容页1.html" target="_blank" title="点击阅读详情">&nbsp;1&nbsp;深潜的梦,T6.5的沉溺</a>
							<img src="images/imgs6-icon.jpg">
							<h6>热度&nbsp;4793&nbsp;&nbsp;</h6>
						</li>
						<li>
							<a href="https://www.zfrontier.com/post/detail/17555" target="_blank" title="点击阅读详情">&nbsp;2&nbsp;JER mini&黑白日文</a>
							<img src="images/imgs1-icon.jpg">
							<h6>热度&nbsp;2867&nbsp;&nbsp;</h6>
						</li>
						<li>
							<a href="https://www.zfrontier.com/post/detail/15913" target="_blank" title="点击阅读详情">&nbsp;3&nbsp;Mojo-Cerakote鸟蛋蓝</a>
							<img src="images/imgs4-icon.jpg">
							<h6>热度&nbsp;2135&nbsp;&nbsp;</h6>
						</li>
						<li>
							<a href="https://www.zfrontier.com/post/detail/12965" target="_blank" title="点击阅读详情">&nbsp;4&nbsp;带着PAD去旅行</a>
							<img src="images/imgs5-icon.png">
							<h6>热度&nbsp;1717&nbsp;&nbsp;</h6>
						</li>
						<li>
							<a href="https://www.zfrontier.com/post/detail/15923" target="_blank" title="点击阅读详情">&nbsp;5&nbsp;AbelX&Jtk黑俄文</a>
							<img src="images/imgs2-icon.jpg">
							<h6>热度&nbsp;1698&nbsp;&nbsp;</h6>
						</li>
						<li>
							<a href="https://www.zfrontier.com/post/detail/15923" target="_blank" title="点击阅读详情">&nbsp;6&nbsp;GeekCable 客制化数据线</a>
							<img src="images/imgs3-icon.jpg">
							<h6>热度&nbsp;1244&nbsp;&nbsp;</h6>
						</li>
				</div>
				<div id="img1">
					<p><a href="https://www.zfrontier.com/post/detail/17555" target="_blank" title="点击阅读详情">JER mini&黑白日文</a></p>
				</div>
				<div id="img2">
					<p><a href="https://www.zfrontier.com/post/detail/15923" target="_blank" title="点击阅读详情">AbelX&Jtk黑俄文</a></p>
				</div>
				<div id="img3">
					<p><a href="https://www.zfrontier.com/post/detail/15923" target="_blank" title="点击阅读详情">GeekCable 客制化数据线</a></p>
				</div>
				<div id="img4">
					<p><a href="https://www.zfrontier.com/post/detail/15913" target="_blank" title="点击阅读详情">Mojo-Cerakote鸟蛋蓝</a></p>
				</div>
				<div id="img5">
					<p><a href="https://www.zfrontier.com/post/detail/12965" target="_blank" title="点击阅读详情">带着PAD去旅行</a></p>
				</div>
				<div id="img6">
					<p><a href="带作业-内容页1.html" target="_blank" title="点击阅读详情">深潜的梦 T6.5的沉溺</a></p>
				</div>
			    <div id="lunbo_button">
					<div id="change-on" class="icon" style="color: white;" onclick="on()" title="点击开启轮播模式">&#xf204 </div>
					<div id="change-off" class="icon" style="color: white;" onclick="off()" title="点击关闭轮播模式">&#xf205 </div>
			    </div>
			</div>
		</div>
		<div id="mid-shop" style="width: 80% margin-top: 0; margin-bottom: 70px;">
			<div class="shop_title" style="width: 93.75%;"><p class="icon" style="font-size: 20px; margin: 0;">&#xf0d7 &nbsp;&nbsp;&nbsp;&nbsp;迷你商店</p></div>
			<div class="shop">
				<div class="shop_goods">
					<img src="images/shop_img7-2.jpg" >
					<p class="goods_detail" onclick="openSHOPDETAIL()">&nbsp;&nbsp;末那末匠 guodong 懒东西手办</p>
					<p class="goods_price">￥88</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img1-2.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;JTK HSA 黑白二色</p>
					<p class="goods_price">￥479</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img1-5.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;ZealPC 静音橙轴</p>
					<p class="goods_price" style="color: gray;">￥204</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img1-3.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;黄粱一梦树脂手托-朝日</p>
					<p class="goods_price">￥349</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img1-4.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;Leopold fc980m鹦鹉螺</p>
					<p class="goods_price" style="color: black;">￥1149</p>
				</div>
			</div>
			<div class="shop">
				<div class="shop_goods">
					<img src="images/shop_img2-1.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;Leopold fc750r Sky</p>
					<p class="goods_price" style="color: black;">￥968</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img2-2.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;Lofree 绽放口红</p>
					<p class="goods_price">￥699</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img2-3.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;iQunix F60 RGB背光版</p>
					<p class="goods_price" style="color: black;">￥499</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img2-4.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;GMK UNIQEY 定制键盘</p>
					<p class="goods_price">￥1862</p>
				</div>
				<div class="shop_goods">
					<img src="images/shop_img2-5.jpg" >
					<p class="goods_detail">&nbsp;&nbsp;iKBC X410 樱桃轴双模键盘</p>
					<p class="goods_price" style="color: dimgrey;">￥899</p>
				</div>
		</div>
		</div>
		<div id="mid_community">
			<div id="mid_title2"><p class="icon" style="font-size: 20px;">&#xf0d7 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装备社区</p></div>
			<div class="post">
				<div class="post_head">
					<div class="post_title" onclick="openTIEZI()">
						深潜的梦 Think6.5的沉溺
					</div>
					<div class="post_user" onclick="openUSER()">
						By Infinitykw
					</div>
					<img src="images/user_icon_1.jpg" >
				</div>
				<div class="post_text">
					灵感始于一个深潜的梦，始于水光四溅，终于窒息深渊。氧气越来越稀薄，黑色的半影附着在漆黑的t6.5，身体被缭绕的乌云包裹。
					震惊于t6.5黑pc极致的触感，就像抚摸海豚，或者鲸的背鳍，充满湿润的滑，连装轴都异常轻松，再一次坚定了让他与水连接的想法。
				</div>
				<div class="post_img">
					<img src="images/imgs6-1.jpg" alt="">
					<img src="images/imgs6-2.jpg" alt="">
					<img src="images/imgs6-4.jpg" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 88&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 67</div>
					<div style="font-size: 16px; color: gray; float: right;">1天前</div>
				</div>
			</div>
			<div class="post">
				<div class="post_head">
					<div class="post_title">
						Mojo60-Cerakote涂层 鸟蛋蓝
					</div>
					<div class="post_user">
						By 林大卵
					</div>
					<img src="images/user_icon_3.jpg" >
				</div>
				<div class="post_text">
					鸟蛋蓝真是太好看了！
				</div>
				<div class="post_img">
					<img src="images/imgs4-1.jpg" alt="">
					<img src="images/imgs4-2.jpg" alt="">
					<img src="images/imgs4-4.jpg" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 68&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 37</div>
					<div style="font-size: 16px; color: gray; float: right;">3小时前</div>
				</div>
			</div>
			<div class="post">
				<div class="post_head">
					<div class="post_title">
						【键盘】m0110 酸奶edition
					</div>
					<div class="post_user">
						By【Rkeytech】我爱酸奶i
					</div>
					<img src="images/user_icon_7.jpg" >
				</div>
				<div class="post_text">
					0110是苹果一款经典的键盘，麦金塔电脑配套的一款键盘，作者在乔帮主在世时一直是果粉，可谓是脑残粉。 
					几年前我进入了客制化圈子，认识了很多朋友：像dcr的作者老C，还有帮助我超级多的SAM
				</div>
				<div class="post_img">
					<img src="images/imgs7-1-2.jpg" alt="">
					<img src="images/imgs7-2-2.jpg" alt="">
					<img src="images/imgs7-3-2.jpg" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 33&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 12</div>
					<div style="font-size: 16px; color: gray; float: right;">2小时前</div>
				</div>
			</div>
			<div class="post">
				<div class="post_head">
					<div class="post_title">
						GeekCable冬季每周新品
					</div>
					<div class="post_user">
						By GeekCable
					</div>
					<img src="images/user_icon_4.png" >
				</div>
				<div class="post_text">
					群号:390406267 满50人抽一根顶配线以此类推 大家都来看看我家的逼格线啦
				</div>
				<div class="post_img">
					<img src="images/imgs3-3.jpg" alt="">
					<img src="images/imgs3-4.jpg" alt="">
					<img src="images/imgs3-2.jpg" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 37&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 3 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 54</div>
					<div style="font-size: 16px; color: gray; float: right;">6小时前</div>
				</div>
			</div>
			<div class="post">
				<div class="post_head">
					<div class="post_title">
						AbelX Banshee & Jtk三色黑俄文
					</div>
					<div class="post_user">
						By 陈老师
					</div>
					<img src="images/user_icon_2.jpg" >
				</div>
				<div class="post_text">
					一个盲开的套件到手确实有蛮多的惊喜 各种看得见看不见的地方做足了细节。
					好像从1.0到2.0再到abelX 我个人感觉cain的作品从明显收到otd影响的设计风格到现在拥有属于自己鲜明的元素 matrix的品牌辨识度越来越高。
				</div>
				<div class="post_img">
					<img src="images/imgs2-1-2.jpg" alt="">
					<img src="images/imgs2-2-2.jpg" alt="">
					<img src="images/imgs2-3-2.jpg" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 79&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 82</div>
					<div style="font-size: 16px; color: gray; float: right;">2天前</div>
				</div>
			</div>
			<div class="post">
				<div class="post_head">
					<div class="post_title">
						带着PAD去旅行 九尾客制化PAD
					</div>
					<div class="post_user">
						By 文森特
					</div>
					<img src="images/user_icon_5.png" >
				</div>
				<div class="post_text">
					Pad样品拿到了，测试没问题。注意，多图杀猫，全是实拍图。能随时随地RGB的Pad，应该是业内首款。团购已开。私信群号参团，限量100个。
				</div>
				<div class="post_img">
					<img src="images/imgs5-1-2.png" alt="">
					<img src="images/imgs5-2-2.png" alt="">
					<img src="images/imgs5-3-2.png" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 45&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 3 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 28</div>
					<div style="font-size: 16px; color: gray; float: right;">3天前</div>
				</div>
			</div>
			<div class="post">
				<div class="post_head">
					<div class="post_title">
						GMK NINES 返璞归真 & Jer Mini
					</div>
					<div class="post_user">
						By Leasonchi
					</div>
					<img src="images/user_icon_6.jpg" >
				</div>
				<div class="post_text">
					这套用的两个基础色卡都是我非常喜欢的。
					深灰和灰白。
					简单，舒服。
					灰白的按键不知道为啥字符感觉太细了，于是换上了9009的两个按键。
					这套和9009联动可以出来很多挺不错的搭配哦~
				</div>
				<div class="post_img">
					<img src="images/imgs1-1-2.jpg" alt="">
					<img src="images/imgs1-2-2.jpg" alt="">
					<img src="images/imgs1-3-2.jpg" alt="">
				</div>
				<div class="post_bottom">
					<div class="icon" style="font-size: 18px; float: left;">&#xf164 39&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf165 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xf075 29</div>
					<div style="font-size: 16px; color: gray; float: right;">8小时前</div>
				</div>
			</div>
		</div>
		<div id="log_on">
			<div id="log_on_top">
				<div id="log_on_top_title">登录  Geek KeyBoard!</div>
				<div id="log_on_close" title="点击关闭该窗口" onclick="log_on_close()">关闭</div>
			</div>
			<div id="log_on_left">
			 <strong><h3>账号密码登录</h3></strong>
			 <form action="#" method="get" id="form1">
				<input type="mail" name="mymail" placeholder="请输入您的账号" class="input1">
				<input type="password" name="mypassword1" placeholder="请输入你的密码" class="input2">
				<div id="checkbox">
					<input type="checkbox" name="check" id="check" value="1" />
					<label for="check">点击表示同意商城《服务协议》</label>
				</div>				
				<button type="submit" class="checkbox_1"><strong>登&nbsp;录</strong></button>
			 </form>
			</div>
			<div id="log_on_right">
				<strong><h3>使用微信扫一扫登录</h3></strong>
				<img src="images/bottom_img1.png" >
			</div>
		</div>
		<button type="button" onclick="bgimg_change()" class="button1" title="点击更换背景图片"><div class="icon" style="color: white;">&#xf0eb </div></button>
		<button type="button" onclick="back_to_top()" class="button2" title="点击返回顶部"><div class="icon" style="color: white;">&#xf148 </div></button>
		<div id="page_number">
			<li style="background-color: gainsboro;">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</div>
		<div id="bottom">
			<div class="bottom_list">
				<div class="bottom_title"><a href="#">Geek KeyBoard!</a></div>
				<ul>
					<li><a href="#">网站指南</a></li>
					<li><a href="#">用户协议</a></li>
					<li><a href="#">在线客服</a></li>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">加入我们</a></li>
				</ul>
			</div>
			<div class="bottom_list">
				<div class="bottom_title"><a href="#">合作厂商</a></div>
				<ul>
					<li><a href="#">GMKeyCaps</a></li>
					<li><a href="#">JTKeyCaps</a></li>
					<li><a href="#">利奥博德Leopold</a></li>
					<li><a href="#">斐尔可Filco</a></li>
					<li><a href="#">阿米洛Varmilo</a></li>
				</ul>
			</div>
			<div class="bottom_list">
				<div class="bottom_title"><a href="#">友情链接</a></div>
				<ul>
					<li><a href="https://www.zfrontier.com/" target="_blank">装备前线|zFrontier</a></li>
					<li><a href="https://www.geekmaker.com/" target="_blank">极制|GeekMaker</a></li>
					<li><a href="https://percent.studio/" target="_blank">Percent Studio</a></li>
					<li><a href="https://shop64592671.taobao.com/?spm=a230r.7195193.1997079397.2.38cb2f94E5G5Sr" target="_blank">怡科外设</a></li>
					<li><a href="https://shop105902419.taobao.com/?spm=a230r.7195193.1997079397.2.179d289a271WPK" target="_blank">酷品世家</a></li>
					<li><a href="https://shop117148064.taobao.com/?spm=a230r.7195193.1997079397.2.413a5d118CPOBb" target="_blank">键帽馆</a></li>
				</ul>
			</div>
			<div class="bottom_img">
				<img src="images/bottom_img1.png" >
			</div>
			<div class="bottom_img">
				<img src="images/bottom_img2.jpg" >
			</div>
			<div class="bottom_last">
			</div>
		</div>
	</body>
</html>
